<template>
  <!--弹出窗-->
  <modal ref="modal_info"
         :title="title"
         :isCloseConfirm="this.editable"
         :fullscreen="this.fullscreen"
         top="8%"
         width="60%"
         :close-on-click-modal="true"
         @modalOpened="opened"
         @modalClose="closed">

      <el-form :model="form" label-width="100px" ref="form" :rules="rules">
        <el-form-item label="发信人" v-if="!this.editable" >
          <div>{{form.fromUserName}}</div>
        </el-form-item>
        <el-form-item label="收信人" required>
          <el-input v-if="this.editable" v-model="form.toUserName" readonly  @click="showSelectUser"/>
          <div v-else>{{form.toUserName}}</div>
        </el-form-item>
        <el-form-item label="发信时间" v-if="!this.editable">
          <div>{{form.createTime}}</div>
        </el-form-item>
        <div  class="article article-text" :v-html="form.content" ></div>
      
        <el-form-item label="内容" required>
          <wangeditor
                  v-if="this.editable"
          v-model="form.content" 
          style="border: 0px; flex: 1"
           class="article"
          />
          <div  class="article article-text" v-else v-html="form.content" ></div>
        </el-form-item>
        <select-user ref="selectUserRef" @success="setUser"></select-user>
      </el-form>

    <!--底部按钮块, 默认只有"取消"按钮-->
    <template #footerButton>
      <el-button
              type="primary"
              v-if="this.editable"
              :disabled="btnLoading"
              @click="handleSubmit"
      >发 送
      </el-button>
      <el-button @click="$refs.modal_info.handleClose()">关闭</el-button>
    </template>
  </modal>
</template>

<script>
  import { getDetail} from "@/api/anwise/im/im_message";
  import {mapGetters} from "vuex";
  import selectUser from "./select_user.vue";
  export default {
      components: {
          selectUser,
      },
    data() {
      return {
          userList:[],
        emits: ["success"],
        editable: false,
        title: "详情",
        isCloseConfirm: false,
        fullscreen: false,
        form: {
            toUserName:''
        },
          rules:{
              toUserName: [
                  { required: true, message: '请选择收信人！', trigger: 'blur' },
              ],
              content: [
                  { required: true, message: '内容不能为空！', trigger: 'blur' },
              ],
          },
        query: {},
        loading: true,
        btnLoading: false,
        data: []
        };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.validData(this.permission.customer_group_add, false),
          viewBtn: this.validData(this.permission.customer_group_view, false),
          delBtn: this.validData(this.permission.customer_group_delete, false),
          editBtn: this.validData(this.permission.customer_group_edit, false)
        };
      },
    },
    methods: {
        handleSubmit() {
            this.$refs.form.validate((valid, fields) => {
                console.log(valid);
              if (!valid) {
                  return;
              }
            });
            if(this.userList.length < 1) {
                this.$message({
                    type: "error",
                    message: "请选择收信人！!"
                });
                return;
            }
            console.log("this.form.content",this.form.content);
            if(!this.form.content) {
                this.$message({
                    type: "error",
                    message: "不能发送空内容！!"
                });
                return;
            }
            this.btnLoading = true;
            this.userList.forEach(item => {
                this.$store.dispatch('sendMessage', {content: this.form.content, type: "CHAT", toUser: item});
            })
            this.$message({
                type: "success",
                message: "发送成功！!"
            });
            this.btnLoading = false;
            setTimeout(() => {
                this.$emit("success");
            }, 1000)
            this.$refs.modal_info.hide();
        },
        showSelectUser(){
            console.log("showSelectUser",this.userList);
          this.$refs.selectUserRef.showSelect(this.userList);
        },
        setUser(list) {
            if (list) {
                this.form.toUserName ="";
              list.forEach(item =>{
                  this.form.toUserName = this.form.toUserName + item.name +"，";
              })
                if (this.form.toUserName.length) {
                    this.form.toUserName = this.form.toUserName.substring(0,this.form.toUserName.length-1);
                }
            }
            this.userList = list;
            console.log(this.userList);
        },
      show(option) {
          if (option.id) {
              setTimeout(() => {
                  getDetail(option.id).then(res =>{
                      console.log(res);
                      if (res.data.success) {
                          this.form = res.data.data;
                      }
                  })
              }, 500);
          } else {
              this.form={}
              this.userList=[];
          }
          this.title = option.title;
          this.type = option.type;
         // this.option.detail = this.type === "view";
          this.editable = this.type !== "view";
          this.$refs.modal_info.show();
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      opened() {
          console.log("opened")
      },
      closed() {
          this.$emit("success");
      }
    }
  };
</script>

<style scoped lang="scss">
  .article {
    flex: 1;
    margin-bottom: 10px;
  &-text {
    background-color: #fafafa;
     overflow-y: auto;
     padding: 0px 15px;
   }
  }
</style>
